<head>
    <script src="../build/index.js"></script>
</head>

<body>
    <canvas id="app" width="1200" height="2400"></canvas>

    <script>
        var $app = new Easycanvas.Painter();
        $app.register(document.getElementById('app'));
        $app.start();

        Easycanvas.ImgLoader('https://raw.githubusercontent.com/c-zhuo/easycanvas/master/demos/G.png', function (img) {
            // create a Sprite
            window.Sprite1 = {
                name: 'Sprite1',
                content: {
                    img: img,
                },
                style: {
                    left: 100, top: 100,
                    locate: 'lt',
                    opacity: 0.5,
                    rotate: 40,
                },
                events: {
                    click: function () {
                        console.log(3);
                    }
                },

                children: [
                    {
                        name: 'child1',
                        content: {
                            img: img,
                        },
                        inherit: ['opacity'],
                        style: {
                            left: 500, top: 0,
                            zIndex: 1,
                            opacity: 0.5,
                            locate: 'center',
                        },
                        events: {
                            eIndex: -3,
                            click: function () {
                                console.log(1);
                            }
                        },
                    },
                    {
                        // inherit: ['opacity'],
                        name: 'child2',
                        content: {
                            img: img,
                        },
                        style: {
                            left: 0, top: 500,
                            opacity: 1,
                            zIndex: 1,
                            locate: 'lt',
                            scale: 5
                        },
                        events: {
                            eIndex: -31,
                            click: function () {
                                console.log(2);
                            }
                        }
                    },
                ],
            };

            window.child3 = {
                name: 'child3',
                inherit: ['tx', 'ty', 'rotate'],
                content: {
                    img: img,
                },
                style: {
                    left: 500, top: 500,
                    opacity: 0.7,
                    zIndex: 1,
                    locate: 'center',
                },
                events: {
                    eIndex: -31,
                    click: function () {
                        console.log(3);
                        this.style.opacity = 0;
                    }
                }
            };

            window.Sprite1.children.push(child3);

            window.Sprite1 = $app.add(window.Sprite1);

            window.Sprite2 = $app.add({
                name: 'Sprite2',
            });

            $app.nextTick(function () {
                Sprite1.children[0].on('del', function (a, b) {
                    console.log(a, b)
                    this.remove();
                });
                Sprite1.children[1].on('del', function (a, b) {
                    console.log(a, b)
                    this.remove();
                });
                Sprite1.on('del', function (a, b) {
                    console.log(a, b)
                    console.log('no');
                });
            });
        });
    </script>
</body>

